<template>
<div>
  <panel :header="title" :footer="footer" :list="list" :type="type" @on-img-error="onImgError"></panel>
</div>
</template>

<script>
  import { Panel } from 'vux'
    export default {
      name: "news",
      components: {
        Panel
      },
      data(){
        return{
          title:'图文组合列表',
          type: '1',
          list: [{
            src: 'http://somedomain.somdomain/x.jpg',
            fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            title: '标题一',
            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            url: '/component/cell'
          }, {
            src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
            title: '标题二',
            desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
            url: {
              path: '/component/radio',
              replace: false
            },
            meta: {
              source: '来源信息',
              date: '时间',
              other: '其他信息'
            }
          }],
          footer:{
            title: 'more',
            url: 'http://vux.li'
          }
        }
      },
      created:function () {
        this.$store.dispatch('Newslist').then((val) => {
          console.log("请求成功！");
          console.log(val.ent);
          let listval = val.ent;
          let nelist = [];
          for(var i =0; i<listval.length; i++){
            let url = ''
            if(listval[i].picInfo[0]){
              url = listval[i].picInfo[0].url
            }
            if(listval[i].title != null){
              nelist.push({
                src: url,
                fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
                title: listval[i].title,
                desc: listval[i].digest,
                url: listval[i].link
              })
            }
          }
          this.list = nelist;
          console.log(nelist);
        })
      },
      methods: {
        onImgError (item, $event) {
          console.log(item, $event)
        }
      },
    }
</script>

<style lang="less">
  .weui-media-box_appmsg {
    .weui-media-box__thumb{
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
</style>
